<template>
  <div>
<h1>用户借款</h1>
<table>
  <tr>
    <td>借款名称</td>
    <td>{{listss.B_Name}}</td>
  </tr>
  <tr>
    <td>借款最高金额</td>
    <td>{{listss.B_Money}}</td>
  </tr>
  <tr>
    <td>借款年限</td>
    <td>{{listss.B_Year}}</td>
  </tr>
  <tr>
    <td>利息</td>
    <td>
      <select v-model="listss.BL_Id">
        <option value="0">请选择</option>
        <option :value="item.BL_Id" v-for="item in lists">{{item.BL_Number*100}}%</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>借款简介</td>
    <td>{{listss.B_Info}}</td>
  </tr>
  <tr>
    <td>借款金额</td>
    <td><input type="text" v-model="UB_Money"></td>
  </tr>
  <tr>
    <td></td>
    <td><input type="button" value="确认借款" @click="ok"></td>
  </tr>
</table>
  </div>
</template>

<script setup lang="ts">
import {reactive,toRefs,onMounted} from 'vue'
import axios from 'axios'
import {useRoute,useRouter} from 'vue-router'
import {useStore} from '../store/use'
const store=useStore()
const router=useRouter()
const route=useRoute()

let data:any=reactive({
  state:{},
  UB_Money:'',
  list:[],
  lists:[],
  listss:[]
})

let {state,list,lists,UB_Money,listss}=toRefs(data)

onMounted(()=>{
  getList()
})

const getList=()=>{
axios({
  url:'/api/Borrow/GetUserBorrowFanTian',
  method:'get',
  params:{
    B_Id:route.query.B_Id,
  }
})
.then(res=>{
  console.log(res);
  listss.value=res.data.data
})
}

const ok=()=>{
  axios({
    url:'/api/Borrow/PostAddUserBorrow',
    method:'post',
    data:{
      YH_Id:store.userInfo.YH_Id,
      B_Id:route.query.B_Id,
      UB_Money:UB_Money.value
    }
  })
  .then(res=>{
    if(res.data.data==-1){
      alert('借款名称已存在');
      return;
    }
    else{
      alert('添加借款成功');
      router.push('/putong');
    }
  })
}

onMounted(()=>{
  getData()
})

const getData=()=>{
  axios({
    url:'/api/Borrow/LiXi',
    method:'get'
  })
  .then(res=>{
    console.log(res.data);
    lists.value=res.data.data
  })
}
</script>

<style scoped>

</style>